<template>
	<view class="" @click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + item.id)">
		<!-- 竖排 一个 -->
		<m-block v-if="type == 2" class="card2 flex" gap="20 20" spa="0 0 16 0">
			<m-image2 radius="20" size="220" types="goods" :src="item.picurl" />
			<!-- <m-image radius="20" size="220" types="goods" :src="item.picurl"></m-image> -->
			<view class="right flex-column flex-between">
				<view class="title">
					<text class="otp2">{{ item.goodsname }}</text>
				</view>
				<view>
					<text class="des fs24 otp2">{{ item.sketch }}</text>
				</view>
				<!-- <view class="discounts">
					<text class="tag1" v-if="Number(item.isnew)">新品</text>
					<text class="tag3" v-if="Number(item.ishot)">爆款</text>
					<text class="tag4" v-if="Number(item.istop)">推荐</text>
				</view> -->
				<view class="price flex-between">
					<view class="flex">
						<m-price :size="[38,24]" :value="item.price" color="#FA2B47" />
					<!-- 	<text class="fs21 ml-12">代理价</text>
						<m-price :size="[28,24]" :value="item.price" color="#333333" /> -->
					</view>
					<text class="totals" v-if="item.wards!=1&&item.wards!=3">已售 {{ item.totalsell | tranNumber2(0) }}</text>
				</view>
				<!-- <view class="evaluate flex">
					<text>{{ item['ccount'] | tranNumber2(0) }}条评价</text>
					<text class="mlr-8">|</text>
					<text>{{ item['fine'] }}%好评</text>
				</view> -->
				<template v-if="!hideShop">
					<view class="store flex-center"
						@click.stop="Jump('/pages/home/goodsShop/goodsShop?shopID=' + item.sid)">
						<m-image radius="100" :size="42" :src="item.sellerUserAvatar"></m-image>
						<!-- <m-icon type="store" size="26" /> -->
						<text>{{ item.sellerUserName||'平台商家' }}</text>
						<text>进店 ></text>
					</view>
				</template>
			</view>
		</m-block>
		<!-- 横排 -->
		<view v-if="type == 1">
			<view class="img-box">
				<m-image2 radius="10" types="goods" :src="item.picurl" />
				<!-- <m-image types="goods" :src="item.picurl"></m-image> -->
			</view>
			<view class="good-title">
				<view class="title otp2">{{ item.goodsname }}</view>
				<!-- <view class=    "otp2 des">{{item.gdescribe}}</view> -->
			</view>
			<view class="good-price flex-between">
				<m-price :value="item.price" color="#FA2B47"></m-price>
				<!-- <text>¥ {{item.price}}</text> -->
				<view class="totals">已售 {{ item.totalsell | tranNumber2(0) }}</view>
			</view>
			<view class="evaluate pl20 flex">
				<text>{{ item['ccount'] | tranNumber2(0) }}条评价</text>
				<text>|</text>
				<text>{{ item['fine']}}%好评</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goodsCard',
		data() {
			return {};
		},
		props: {
			//1为半列表  2为全列表
			type: {
				type: [String, Number],
				default: 1
			},
			item: {
				type: Object,
				default: {}
			},
			hideShop: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			// des() {
			// 	if (!this.item.goodsDescription) return [];
			// 	console.log(this.item.goodsDescription.split(','));
			// 	return this.item.goodsDescription.split('，');
			// },
			// goodsPictureList() {
			// 	return this.item.goodsPictureList || [];
			// },
			Picture() {
				return;
			}
		}
	};
</script>

<style lang="scss">
	.li {
		background: #fefefe;
		box-shadow: 0px 0px 16rpx 0px rgba(122, 122, 122, 0.22);
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;

		.combo {
			z-index: 99;
			position: absolute;
			width: 90rpx;
			height: 38rpx;
			left: 0;
			top: 0;
		}

		.img-box {
			width: 100%;
			max-width: 430rpx;
			height: 330rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.good-title {
			padding: 20rpx 10rpx 10rpx;

			.title {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				min-height: 48rpx;
			}

			.des {
				width: 100%;
				overflow: hidden;
				height: 70rpx;
				padding-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
			}
		}

		.good-price {
			padding: 0rpx 12rpx 4rpx 12rpx;
			align-items: flex-end;
			// text:nth-of-type(1) {
			// 	font-size: 30rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: bold;
			// 	color: #F50723;
			// }

			.totals {
				padding-bottom: 8rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.card2 {

		.right {
			padding-left: 26rpx;
			flex: 1;
			overflow: hidden;
			align-items: flex-start;
			min-height: 200rpx;

			.title {
				display: inline-block;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				padding-bottom: 4rpx;
			}

			.des {
				width: 100%;
				overflow: hidden;

				text {
					display: inline-block;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #787878;
					position: relative;
				}

				text+text {
					padding-left: 30rpx;

					&::after {
						content: '';
						display: block;
						position: absolute;
						left: 15rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 1rpx;
						height: 25rpx;
						background: #787878;
					}
				}
			}

			.des2 {
				width: 100%;
				overflow: hidden;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #787878;
					position: relative;
				}
			}

			.price {
				padding: 12rpx 0rpx 2rpx !important;
				width: 100%;
				align-items: flex-end;

				text {
					display: inline-block;
				}

				.totals {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.discounts {
				text {
					display: inline-block;
					border-radius: 8rpx;
					font-size: 21rpx;
					padding: 1rpx 8rpx;
					font-family: PingFang SC;
				}

				text+text {
					margin-left: 10rpx;
				}
			}

			.store {
				margin-top: 8rpx;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;

				text:nth-of-type(1) {
					padding: 0 10rpx;
					color: #333;
				}

				text:nth-of-type(2) {
					color: #999;
				}
			}
		}
	}

	.evaluate {
		width: 100%;

		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #787878;
			padding-right: 10rpx;
		}

		.totals {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.pl20 {
		padding: 0rpx 16rpx 20rpx;
	}
</style>